<template> 
   <div id="install"> 
    <div class="docsMain"> 
     <div class="page_container"> 
      <div class="title">
       ✨ 开始! 安装
      </div> 
      <div class="subtitle">
        使用 
       <span class="baseCode">NPM</span> 进行安装 
      </div> 
      <p> 我们更加推荐您使用 <span class="subCode">npm</span> 的方式进行安装， 使用 <span class="subCode">npm</span> 可以方便包管理。 使用 <span class="subCode">webpack</span> 工具，创建项目，前端构建工具会让前端开发更加高效。 </p> 
      <div class="preCode">
       npm install bf-design-ui --save
      </div> 
      <p> 如果是通过 <span class="subCode">npm</span> 安装，并希望配合 <span class="subCode">webpack</span> 使用，请忽略 <span class="subCode">CDN</span> 方式，直接查看： <span class="a_started" @click="goStarted">快速上手</span> </p> 
      <div class="subtitle">
        使用 
       <span class="baseCode">CDN</span> 进行引入 
      </div> 
      <p> 目前可以通过 <span class="subCode">unpkg.com/bf-design-ui</span> 的方式进行安装，获取到最新版本的资源，在页面上引入 <span class="subCode">js</span> 和 <span class="subCode">css</span> 文件即可开始使用。 </p> 
      <div class="vueCode" style="color:#666;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;"> 
       <div>
         &nbsp; 
        <span style="color:#160;">&lt;!--&nbsp;引入&nbsp;css&nbsp;--&gt;</span> 
       </div> 
       <div>
         &nbsp; 
        <span style="color:#808080;">&lt;</span> 
        <span style="color:#008dff;">link</span>&nbsp; 
        <span style="color:#008dff;">rel</span>= 
        <span style="color:#ef9431;">&quot;stylesheet&quot;</span>&nbsp; 
        <span style="color:#008dff;">href</span>= 
        <span style="color:#ef9431;">&quot;https://unpkg.com/bf-design-ui/dist/styles/bf-design-ui.css&quot;</span>&nbsp;/ 
        <span style="color:#808080;">&gt;</span> 
       </div> 
       <div>
         &nbsp; 
        <span style="color:#160;">&lt;!--&nbsp;引入bf-design-ui&nbsp;--&gt;</span> 
       </div> 
       <div>
         &nbsp; 
        <span style="color:#808080;">&lt;</span> 
        <span style="color:#008dff;">script</span>&nbsp; 
        <span style="color:#008dff;">src</span>= 
        <span style="color:#ef9431;">&quot;https://unpkg.com/bf-design-ui/dist/bf-design-ui.min.js&quot;</span> 
        <span style="color:#808080;">&gt;&lt;/</span> 
        <span style="color:#008dff;">script</span> 
        <span style="color:#808080;">&gt;</span> 
       </div> 
      </div> 
      <div class="subtitle">
       CDN 引入使用实例:
      </div> 
      <div class="vueCode" style="color:#666;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;"> 
       <div> 
        <div style="color:#666;background-color:#f5f5f5;font-family:Consolas, &quot;font-size:20px;"> 
         <div> 
          <span style="color:#808080;">&lt;!</span>
          <span style="color:#008dff;">DOCTYPE</span>&nbsp;
          <span style="color:#008dff;">html</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div> 
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">html</span>&nbsp;
          <span style="color:#008dff;">lang</span>=
          <span style="color:#ef9431;">&quot;en&quot;</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div> 
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">head</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">meta</span>&nbsp;
          <span style="color:#008dff;">charset</span>=
          <span style="color:#ef9431;">&quot;UTF-8&quot;</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">meta</span>&nbsp;
          <span style="color:#008dff;">http-equiv</span>=
          <span style="color:#ef9431;">&quot;X-UA-Compatible&quot;</span>&nbsp;
          <span style="color:#008dff;">content</span>=
          <span style="color:#ef9431;">&quot;IE=edge&quot;</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">meta</span>&nbsp;
          <span style="color:#008dff;">name</span>=
          <span style="color:#ef9431;">&quot;viewport&quot;</span>&nbsp;
          <span style="color:#008dff;">content</span>=
          <span style="color:#ef9431;">&quot;width=device-width,&nbsp;initial-scale=1.0&quot;</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">title</span>
          <span style="color:#808080;">&gt;</span>Bf-Design-Ui&nbsp;Demo
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">title</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">link</span>&nbsp;
          <span style="color:#008dff;">rel</span>=
          <span style="color:#ef9431;">&quot;stylesheet&quot;</span>&nbsp;
          <span style="color:#008dff;">type</span>=
          <span style="color:#ef9431;">&quot;text/css&quot;</span>&nbsp;
          <span style="color:#008dff;">href</span>=
          <span style="color:#ef9431;">&quot;https://unpkg.com/bf-design-ui/dist/styles/bf-design-ui.css&quot;</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">script</span>&nbsp;
          <span style="color:#008dff;">type</span>=
          <span style="color:#ef9431;">&quot;text/javascript&quot;</span>&nbsp;
          <span style="color:#008dff;">src</span>=
          <span style="color:#ef9431;">&quot;http://vuejs.org/js/vue.min.js&quot;</span>
          <span style="color:#808080;">&gt;&lt;/</span>
          <span style="color:#008dff;">script</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">script</span>&nbsp;
          <span style="color:#008dff;">type</span>=
          <span style="color:#ef9431;">&quot;text/javascript&quot;</span>&nbsp;
          <span style="color:#008dff;">src</span>=
          <span style="color:#ef9431;">&quot;https://unpkg.com/bf-design-ui/dist/bf-design-ui.min.js&quot;</span>
          <span style="color:#808080;">&gt;&lt;/</span>
          <span style="color:#008dff;">script</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div> 
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">head</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div> 
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">body</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">div</span>&nbsp;
          <span style="color:#008dff;">id</span>=
          <span style="color:#ef9431;">&quot;app&quot;</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">bf-button</span>&nbsp;
          <span style="color:#008dff;">type</span>=
          <span style="color:#ef9431;">&quot;info&quot;</span>&nbsp;
          <span style="color:#008dff;">@click</span>=
          <span style="color:#ef9431;">&quot;openMessage('info')&quot;</span>
          <span style="color:#808080;">&gt;</span>消息提示
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">bf-button</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">bf-button</span>&nbsp;
          <span style="color:#008dff;">type</span>=
          <span style="color:#ef9431;">&quot;success&quot;</span>&nbsp;
          <span style="color:#008dff;">@click</span>=
          <span style="color:#ef9431;">&quot;openMessage('success')&quot;</span>
          <span style="color:#808080;">&gt;</span>成功提示
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">bf-button</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">bf-button</span>&nbsp;
          <span style="color:#008dff;">type</span>=
          <span style="color:#ef9431;">&quot;warning&quot;</span>&nbsp;
          <span style="color:#008dff;">@click</span>=
          <span style="color:#ef9431;">&quot;openMessage('warning')&quot;</span>
          <span style="color:#808080;">&gt;</span>警告提示
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">bf-button</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">bf-button</span>&nbsp;
          <span style="color:#008dff;">type</span>=
          <span style="color:#ef9431;">&quot;danger&quot;</span>&nbsp;
          <span style="color:#008dff;">@click</span>=
          <span style="color:#ef9431;">&quot;openMessage('error')&quot;</span>
          <span style="color:#808080;">&gt;</span>错误提示
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">bf-button</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div> 
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">div</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div> 
          <span style="color:#808080;">&lt;</span>
          <span style="color:#008dff;">script</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div>
           &nbsp;&nbsp;
          <span style="color:#008dff;">new</span>&nbsp;
          <span style="color:#160;">Vue</span>({ 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#008dff;">el:</span>&nbsp;
          <span style="color:#ef9431;">'#app'</span>, 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#008dff;">methods:</span>&nbsp;{ 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#ef9431;">openMessage</span>(
          <span style="color:#008dff;">type</span>){ 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#008dff;">this</span>.
          <span style="color:#008dff;">$message</span>[
          <span style="color:#008dff;">type</span>]({ 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#008dff;">content:</span>&nbsp;
          <span style="color:#ef9431;">`这是一条带背景色的&nbsp;</span>
          <span style="color:#008dff;">${</span>
          <span style="color:#008dff;">type</span>
          <span style="color:#008dff;">}</span>
          <span style="color:#ef9431;">&nbsp;提示`</span>, 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color:#008dff;">background:</span>&nbsp;
          <span style="color:#008dff;">true</span>, 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
         </div> 
         <div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
         </div> 
         <div>
           &nbsp;&nbsp;}) 
         </div> 
         <div> 
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">script</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div> 
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">body</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
         <div> 
          <span style="color:#808080;">&lt;/</span>
          <span style="color:#008dff;">html</span>
          <span style="color:#808080;">&gt;</span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  computed: {},
  methods: {
    goStarted() {
      this.$emit("toSubtitle", 1);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang='scss'>
#install {
  .docsMain {
    height: 100%;
    min-height: auto;
    background: #fff;
    .page_container {
      width: 100%;
      margin: 0 auto;
      .title {
        font-size: 26px;
        font-weight: bold;
        font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
          helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
          segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
        line-height: 26px;
        margin-top: 8px;
        color: #000000d9;
      }
      .subtitle {
        clear: both;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        margin-top: 50px;
        font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
          helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
          segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
        color: #000000d9;
      }
      .baseCode {
        margin: 0 1px;
        padding: 0.2em 0.4em;
        font-size: 0.9em;
        background: #f5f5f5;
        color: #333;
        border: 1px solid #f0f0f0;
        border-radius: 3px;
      }
      .subCode {
        display: inline-block;
        font-style: normal;
        font-size: 0.9em;
        color: #ef9431;
        background-color: #fef7ee;
        padding: 1px 5px;
        border-radius: 2px;
        margin: 1px 3px;
        font-family: Consolas, Menlo, Courier, monospace;
      }
      .preCode {
        background-color: #f5f5f5;
        margin: 0;
        color: #333;
        padding: 15px 20px;
      }
      p {
        margin: 10px 0;
        font-size: 16px;
        color: #666;

        letter-spacing: 0.5pt;
      }
      .a_started {
        color: #2d8cf0;
        cursor: pointer;
        &:hover {
          color: #57a3f3;
        }
      }
      .vueCode {
        padding: 1em 1em;
        font-size: 14px;
        background: #f5f5f5;
        color: #333;
        border: 1px solid #f0f0f0;
        border-radius: 3px;
      }
    }
  }
}
</style>